<template>
	<view class="ucenter-container">
		<!-- 顶部用户信息区域 -->
		<view class="user-header">
			<view class="user-info" @click="toUserInfo">
				<image
					v-if="userInfo.avatar_file && userInfo.avatar_file.url"
					class="user-avatar"
					:src="userInfo.avatar_file.url"
					mode="aspectFill"
				/>
				<view v-else class="user-avatar default-avatar">
					<uni-icons color="#ffffff" type="person-filled" size="50" />
				</view>
				<view class="user-details">
					<text class="user-name">{{ userInfo.nickname || userInfo.username || '未登录' }}</text>
					<text class="user-id">ID: {{ userInfo._id ? userInfo._id.substring(0, 8) : '未登录' }}</text>
				</view>
			</view>
			<view class="edit-icon" @click="toUserInfo">
				<uni-icons type="compose" size="24" color="#666" />
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-card">
			<view class="stat-item">
				<text class="stat-number">{{ userScore }}</text>
				<text class="stat-label">当前积分</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">52</text>
				<text class="stat-label">使用天数</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">18</text>
				<text class="stat-label">问诊次数</text>
			</view>
		</view>

		<!-- 常用功能 -->
		<view class="section">
			<text class="section-title">常用功能</text>
			<view class="function-grid">
				<view class="function-item" @click="navigateTo('/pages/ucenter/medical-records/medical-records')">
					<view class="function-icon">
						<uni-icons type="paperplane" size="32" color="#007AFF" />
					</view>
					<text class="function-text">病例档案</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/ucenter/device-data/device-data')">
					<view class="function-icon">
						<uni-icons type="gear" size="32" color="#007AFF" />
					</view>
					<text class="function-text">设备数据</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/ucenter/my-appointments/my-appointments')">
					<view class="function-icon">
						<uni-icons type="calendar" size="32" color="#007AFF" />
					</view>
					<text class="function-text">我的预约</text>
				</view>
				<view class="function-item" @click="navigateTo('/pages/ucenter/drug-store/drug-store')">
					<view class="function-icon">
						<uni-icons type="shop" size="32" color="#007AFF" />
					</view>
					<text class="function-text">药物商场</text>
				</view>
			</view>
		</view>

		<!-- 其他功能 -->
		<view class="section">
			<text class="section-title">其他功能</text>
			<view class="other-functions">
				<view class="other-function-item" @click="navigateTo('/pages/ucenter/points-mall/points-mall')">
					<view class="other-function-icon">
						<uni-icons type="wallet" size="24" color="#007AFF" />
					</view>
					<text class="other-function-text">积分商城</text>
					<uni-icons type="right" size="16" color="#ccc" />
				</view>
				<view class="other-function-item" @click="signIn">
					<view class="other-function-icon">
						<uni-icons type="list" size="24" color="#007AFF" />
					</view>
					<text class="other-function-text">普通签到</text>
					<uni-icons type="right" size="16" color="#ccc" />
				</view>
			</view>
		</view>

		<!-- 设置列表 -->
		<view class="settings-list">
			<view class="setting-item" @click="navigateTo('/pages/ucenter/appearance/appearance')">
				<view class="setting-icon">
					<uni-icons type="grid" size="20" color="#666" />
				</view>
				<text class="setting-text">外观</text>
				<uni-icons type="right" size="16" color="#ccc" />
			</view>
			
			<view class="setting-item" @click="navigateTo('/pages/ucenter/notifications/notifications')">
				<view class="setting-icon">
					<uni-icons type="chatbubble" size="20" color="#666" />
				</view>
				<text class="setting-text">提醒与通知</text>
				<view class="push-button">
					<text class="push-text">启用推送</text>
				</view>
			</view>
			
			<view class="setting-item" @click="navigateTo('/pages/ucenter/settings/settings')">
				<view class="setting-icon">
					<uni-icons type="gear" size="20" color="#666" />
				</view>
				<text class="setting-text">更多设置</text>
				<uni-icons type="right" size="16" color="#ccc" />
			</view>
			
			<view class="setting-item" @click="navigateTo('/pages/ucenter/help-feedback/help-feedback')">
				<view class="setting-icon">
					<uni-icons type="help" size="20" color="#666" />
				</view>
				<text class="setting-text">帮助与反馈</text>
				<uni-icons type="right" size="16" color="#ccc" />
			</view>
			
			<view class="setting-item" @click="navigateTo('/pages/ucenter/rate-us/rate-us')">
				<view class="setting-icon">
					<uni-icons type="star" size="20" color="#666" />
				</view>
				<text class="setting-text">给我们评价</text>
				<uni-icons type="right" size="16" color="#ccc" />
			</view>
			
			<view class="setting-item" @click="navigateTo('/pages/ucenter/recommend/recommend')">
				<view class="setting-icon">
					<uni-icons type="redo" size="20" color="#666" />
				</view>
				<text class="setting-text">推荐给他人</text>
				<uni-icons type="right" size="16" color="#ccc" />
			</view>
		</view>
		
		<!-- 添加签到组件 -->
		<uni-sign-in ref="signIn"></uni-sign-in>
	</view>
</template>

<script>
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
import callCheckVersion from '@/uni_modules/uni-upgrade-center-app/utils/call-check-version';
// #ifdef APP
import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
const uniShare = new UniShare()
// #endif
const db = uniCloud.database();
import {
	store,
	mutations
} from '@/uni_modules/uni-id-pages/common/store.js'

export default {
	data() {
		return {
			userScore: 0
		}
	},
	computed: {
		userInfo() {
			return store.userInfo
		},
		hasLogin() {
			return store.hasLogin
		}
	},
	onLoad() {
		this.getUserScore()
	},
	onShow() {
		// 每次显示页面时刷新积分
		this.getUserScore()
	},
	methods: {
		// 获取用户积分
		async getUserScore() {
			console.log('开始获取积分，登录状态:', this.hasLogin);
			
			if (!this.hasLogin) {
				console.log('用户未登录，积分设为0');
				this.userScore = 0;
				return;
			}
			
			console.log('用户ID:', this.userInfo._id);
			
			try {
				const db = uniCloud.database();
				const res = await db.collection('uni-id-scores')
					.where('user_id == $env.uid')
					.field('balance')
					.orderBy('create_date', 'desc')
					.limit(1)
					.get();
				
				console.log('积分查询结果:', res);
				
				if (res.result.data && res.result.data.length > 0) {
					this.userScore = res.result.data[0].balance || 0;
					console.log('获取到积分:', this.userScore);
				} else {
					console.log('未找到积分记录');
					this.userScore = 0;
				}
			} catch (error) {
				console.error('获取积分失败:', error);
				this.userScore = 0;
			}
		},
		toUserInfo() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
				})
			} else {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
				})
			}
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		signIn() {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
				});
				return;
			}
			this.$refs.signIn.open();
		},
		// 在签到成功后更新积分
		handleSignInSuccess() {
			this.getUserScore();  // 更新积分
			uni.showToast({
				title: '签到成功',
				icon: 'success'
			});
		}
	},
	onReady() {
		// 监听签到成功事件
		this.$refs.signIn.$on('signinSuccess', this.handleSignInSuccess);
	}
}
</script>

<style lang="scss" scoped>
.ucenter-container {
	background: #f5f8fc;
	min-height: 100vh;
	padding-bottom: 20rpx;
}

.user-header {
	background: #fff;
	padding: 40rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.user-info {
	display: flex;
	align-items: center;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 24rpx;
}

.default-avatar {
	background: #007aff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-details {
	display: flex;
	flex-direction: column;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #222;
	margin-bottom: 8rpx;
}

.user-id {
	font-size: 24rpx;
	color: #999;
}

.edit-icon {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stats-card {
	background: #fff;
	margin: 0 32rpx 20rpx 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;
	display: flex;
	justify-content: space-around;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-number {
	font-size: 48rpx;
	font-weight: bold;
	color: #007AFF;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
}

.section {
	background: #fff;
	margin: 0 32rpx 20rpx 32rpx;
	border-radius: 16rpx;
	padding: 32rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #222;
	margin-bottom: 24rpx;
	display: block;
}

.function-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 32rpx;
}

.function-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.function-icon {
	width: 80rpx;
	height: 80rpx;
	background: #f0f8ff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16rpx;
}

.function-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
}

.other-functions {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.other-function-item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.other-function-item:last-child {
	border-bottom: none;
}

.other-function-icon {
	margin-right: 16rpx;
}

.other-function-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.settings-list {
	background: #fff;
	margin: 0 32rpx;
	border-radius: 16rpx;
	overflow: hidden;
}

.setting-item {
	display: flex;
	align-items: center;
	padding: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-icon {
	margin-right: 16rpx;
}

.setting-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.push-button {
	background: #007AFF;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

.push-text {
	font-size: 22rpx;
	color: #fff;
}
</style>